
<template>
  <div class="resource-main-box new-page table-h-48">
    <a-form-model layout="inline" :model="search" class="comm-search-f" :style="`width: calc(100% - ${sideMenuWidth} - 33px)`">
      <!-- 筛选条件与查询 -->
      <a-form-model-item label="">
        <repReportType v-model="search.reportType" :data-source="templateNameListF" style="width:200px" @change="changeTable({current:1})" />

      </a-form-model-item>
    </a-form-model>
    <!-- table -->
    <a-table
      class="table-border"
      :columns="columns"
      size="middle"
      :data-source="servServiceConfList"
      :row-key="(row,index) => row.id"
      :pagination="{
        showTotal:(total)=> `共 ${total} 条数据`,
        showSizeChanger: true,//设置每页显示数据条数
        showQuickJumper: true,
        size:'big',
        current:paginationOptions.pageNum,
        pageSize:paginationOptions.pageSize,
        total:paginationOptions.total
      }"
      :loading="servServiceConfLoading"
      @change="changeTable"
    />

    <a-modal
      v-model="editVisible"
      :mask-closable="false"
      title=""
      width="30%"
      centered
      :dialog-style="{height:'425px'}"
      ok-text="提交"
      class="rt-i-modal"
      :confirm-loading="updateServServiceConfLoading"
      @ok="addConfirmHandler"
      @cancel="cancelHandler"
    >
      <span slot="closeIcon" class="c-dialog-close-icon"><a-icon :component="require('@/assets/icon/close.svg')" /></span>

      <div class="c-dialog-title fw-500">编辑触发条件</div>
      <a-form-model
        ref="addForm"
        :model="addForm"
        class="rt-i-modal"
        :rules="addRules"
      >
        <a-form-model-item label="时间单位" prop="timeUnit">
          <a-select
            v-model="addForm.timeUnit"
            show-arrow
            style="minWidth: 100%"
            placeholder="时间单位"
            class="input-type-o"
            allow-clear
          >
            <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
            <a-select-option v-for="item in timeUnitList" :key="item" :value="item">
              {{ item }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="警报方向" prop="alertDirection">
          <a-select
            v-model="addForm.alertDirection"
            show-arrow
            style="minWidth: 100%"
            placeholder="警报方向"
            class="input-type-o"
            allow-clear
          >
            <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
            <a-select-option v-for="item in alertList" :key="item" :value="item">
              {{ item }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="机型" prop="model">
          <a-row :gutter="16">
            <a-col :span="17">
              <airModel v-model="addForm.model" :allow-clear="false" class="input-type-o" />
            </a-col>
            <a-col :span="4">
              <a-button type="primary" @click="edit2Visible=true">
                编辑
              </a-button>
            </a-col>
          </a-row>
        </a-form-model-item>
        <a-modal
          v-model="edit2Visible"
          :mask-closable="false"
          title=""
          width="30%"
          centered
          :dialog-style="{height:'615px'}"
          ok-text="确定"
          class="rt-i-modal"
          @ok="edit2Visible=false"
          @cancel="cancel2Handler"
        >

          <span slot="closeIcon" class="c-dialog-close-icon"><a-icon :component="require('@/assets/icon/close.svg')" /></span>

          <div class="c-dialog-title fw-500">
            编辑触发条件
            <div class="fs-14">{{ addForm.model }}</div>
          </div>

          <a-form-model
            ref="addForm"
            :model="addForm"
            class="rt-i-modal"
            :rules="addRules"
          >
            <a-form-model-item label="长期持续时间" prop="longTermDuration">
              <a-input-number v-model="addForm.longTermDuration" class="input-type-o" placeholder="长期持续时间" style="width: 100%" />
            </a-form-model-item>
            <a-form-model-item label="短期持续时间" prop="shortTermDuration">
              <a-input-number v-model="addForm.shortTermDuration" class="input-type-o" placeholder="短期持续时间" style="width: 100%" />
            </a-form-model-item>
            <a-form-model-item label="长期阈值" prop="longTermThreshold">
              <a-input-number v-model="addForm.longTermThreshold" class="input-type-o" placeholder="长期阈值" style="width: 100%" />
            </a-form-model-item>
            <a-form-model-item label="短期阈值" prop="shortTermThreshold">
              <a-input-number v-model="addForm.shortTermThreshold" class="input-type-o" placeholder="短期阈值" style="width: 100%" />
            </a-form-model-item>
            <a-form-model-item label="保养限额" prop="operationalAlertLimit">
              <a-input-number v-model="addForm.operationalAlertLimit" class="input-type-o" placeholder="保养限额" style="width: 100%" />
            </a-form-model-item>
            <a-form-model-item label="维修限额" prop="serviceAlertLimit">
              <a-input-number v-model="addForm.serviceAlertLimit" class="input-type-o" placeholder="维修限额" style="width: 100%" />
            </a-form-model-item>
            <a-form-model-item label="斜率限额" prop="trendSlopeLimit">
              <a-input-number v-model="addForm.trendSlopeLimit" class="input-type-o" placeholder="斜率限额" style="width: 100%" />
            </a-form-model-item>
          </a-form-model>
        </a-modal>

      </a-form-model>
    </a-modal>

    <!-- 斜率  -->
    <a-modal
      v-model="editSlopeVisible"
      :mask-closable="false"
      title=""
      width="400px"
      centered
      :dialog-style="{height:'605px'}"
      ok-text="提交"
      class="rt-i-modal"
      :confirm-loading="slopeLoading"
      @ok="updateSlopeConfirmHandler"
      @cancel="cancelHandler"
    >
      <span slot="closeIcon" class="c-dialog-close-icon"><a-icon :component="require('@/assets/icon/close.svg')" /></span>

      <div class="c-dialog-title fw-500">编辑斜率算法参数</div>
      <a-form-model
        ref="slopeForm"
        :model="slopeForm"
        class="rt-i-modal"
        :rules="slopeRules"
      >
        <a-form-model-item label="偏差率" prop="deviationRate">
          <a-input-number v-model="slopeForm.deviationRate" style="minWidth: 100%" :min="0" />
        </a-form-model-item>
        <a-form-model-item label="间隔天数" prop="interval">
          <a-input-number v-model="slopeForm.interval" style="minWidth: 100%" :min="0" />
        </a-form-model-item>
        <a-form-model-item label="线性回归累计时间点" prop="pointTime">
          <a-input-number v-model="slopeForm.pointTime" style="minWidth: 100%" :min="0" />
        </a-form-model-item>
        <a-form-model-item label="R2值" prop="r2">
          <a-input-number v-model="slopeForm.r2" style="minWidth: 100%" :min="0" />
        </a-form-model-item>
        <a-form-model-item label="斜率值" prop="slope">
          <a-input-number v-model="slopeForm.slope" style="minWidth: 100%" :min="0" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>

  </div>
</template>

<script>

import { mapState, mapActions, mapGetters, mapMutations } from 'vuex';
import rowClass from '@/pages/common/rowClass';
import repReportType from '@/pages/components/repReportType';
// import { de } from 'date-fns/locale';
import airModel from '@/pages/components/airModel';
export default {
  components: {
    repReportType,
    airModel
  },
  mixins: [rowClass],
  data() {
    return {
      editSlopeVisible: false,
      edit2Visible: false,
      radioRowId: '',
      editVisible: false,
      search: {},
      soureData: [],
      addForm: {},
      addForm2: {},
      timeUnitList: Object.freeze([
        'flight', 'operating', 'hour', 'day', 'cycle', 'time'
      ]),
      alertList: Object.freeze([
        'upper', 'lower', 'both'
      ]),
      slopeForm: {},
      slopeRules: Object.freeze({
        deviationRate: [
          { required: true, type: 'number', message: '请填写', trigger: 'change' }
        ],
        interval: [
          { required: true, type: 'number', message: '请填写', trigger: 'change' }
        ],
        pointTime: [
          { required: true, type: 'number', message: '请填写', trigger: 'change' }
        ],
        r2: [
          { required: true, type: 'number', message: '请填写', trigger: 'change' }
        ],
        slope: [
          { required: true, type: 'number', message: '请填写', trigger: 'change' }
        ]
      }),
      addRules: Object.freeze({
        timeUnit: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        alertDirection: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        model: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        longTermDuration: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        shortTermDuration: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        longTermThreshold: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        shortTermThreshold: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        operationalAlertLimit: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        serviceAlertLimit: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        trendSlopeLimit: [
          { required: true, message: '请填写', trigger: 'change' }
        ]

      }),
      columns: Object.freeze([
        {
          title: '项目名称',
          align: 'left',
          field: 'name',
          key: 'name',
          dataIndex: 'name',
          customRender: (value) => {
            return value || '--';
          }
        },
        {
          title: '警报方向',
          align: 'left',
          field: 'alertDirection',
          key: 'alertDirection',
          dataIndex: 'alertDirection',
          customRender: (value) => {
            return value || '--';
          }

        },
        {
          title: '时间单位',
          align: 'left',
          field: 'timeUnit',
          key: 'timeUnit',
          dataIndex: 'timeUnit',
          customRender: (value) => {
            return value || '--';
          }

        },
        {
          title: '触发时间间隔',
          align: 'left',
          field: 'timeInterval',
          key: 'timeInterval',
          dataIndex: 'timeInterval',
          customRender: (value) => {
            return value || '--';
          }
        },
        {
          title: '参数名称',
          align: 'left',
          field: 'labelName',
          key: 'labelName',
          dataIndex: 'labelName',
          customRender: (value) => {
            return value || '--';
          }

        },
        {
          title: '数据分组(DCG)',
          align: 'left',
          field: 'groupName',
          key: 'groupName',
          dataIndex: 'groupName',
          customRender: (value) => {
            return value || '--';
          }

        },
        {
          title: '操作',
          align: 'left',
          dataIndex: 'option',
          width: 140,
          customRender: (value, record, index) => {
            return [
              <a-button size='small' type='link' onClick={() => this.optionHandler(record)}>触发</a-button>,

              <a-button size='small' type='link' onClick={() => this.slopeHandler(record)}>斜率</a-button>

            ];
          }

        }
      ]),
      inLineColumns: [
        // {
        //   title: '',
        //   type: 'radio',
        //   width: 60
        // },
        {
          title: '报告类型',
          dataIndex: 'category',
          key: 'reportType',
          align: 'left',
          slots: {
            default: ({ row }) => {
              return row.reportType || '--';
            }
          }
        },
        {
          title: '服务或性能',
          dataIndex: 'item',
          key: 'performance',
          ellipsis: true,
          align: 'left',
          slots: {
            default: ({ row }) => {
              return this.servServiceConfDetail?.item || '--';
            }
          }
        }
      ],
      limitColumns: [
        {
          title: '时间单位',
          dataIndex: 'timeunit',
          width: '33.3%',
          align: 'left'
        },
        {
          title: '警报方向',
          dataIndex: 'alertDeriction',
          width: '33.3%',
          align: 'left'
        },
        {
          title: '限制和效果',
          dataIndex: 'limitAndeffect',
          width: '33.3%',
          align: 'left'
        }
      ]
    };
  },
  computed: {
    ...mapState('serviceManagementSettings', [
      'servServiceConfList',
      'servServiceConfLoading',
      'servServiceConfDetail',
      'updateServServiceConfLoading',
      'paginationOptions',
      'slopeLoading'
    ]),
    ...mapState('fraMonitoring', [
      'repReportType'
    ]),
    ...mapState('fraMonitoring', [
      'templateNameList'
    ]),
    ...mapGetters('setting', ['sideMenuWidth']),
    templateNameListF() {
      return this.templateNameList.filter(item => item.smi === 'DFD');
    }
  },
  created() {
    this.changeTable({ current: 1 });
  },
  mounted() {

  },

  methods: {
    ...mapMutations('serviceManagementSettings', [
      'setState'
    ]),
    ...mapActions('serviceManagementSettings', [
      'getServServiceConfList',
      'getServServiceConfDetail',
      'updateServServiceConf',
      'modifySlope'
    ]),
    // radioChange({ row }) {
    //   this.radioRowId = row.id;
    // },
    changeTable({ current, pageSize = 10 }) {
      if (pageSize !== this.paginationOptions.pageSize) {
        current = 1;
      }
      this.setState({ key: 'paginationOptions', payload: { ...this.paginationOptions, pageNum: current, pageSize }});
      this.getData();
    },
    cancel2Handler() {
      const { timeUnit, alertDirection, model } = this.addForm;
      this.addForm = { ...this.addForm2, timeUnit, alertDirection, model };
    },
    optionHandler(record) {
      this.editVisible = true;
      this.addForm = { ...record };
      this.addForm2 = { ...record };
    },
    slopeHandler(record) {
      const { id, deviationRate, interval, pointTime, r2, slope } = record;
      this.editSlopeVisible = true;

      this.slopeForm = { deviationRate, interval, pointTime, r2, slope, confId: id };
    },

    // 重置
    resetSearchHandler() {
      this.search = {};
      this.changeTable({ current: 1 });
    },

    openEditHandle() {
      this.editVisible = true;
    },
    // 获取table
    getData() {
      this.getServServiceConfList(this.search);
    },
    // 编辑斜率
    updateSlopeConfirmHandler() {
      this.$refs.slopeForm.validate(valid => {
        if (valid) {
          this.modifySlope(this.slopeForm).then((rep) => {
            if (rep) {
              this.editSlopeVisible = false;
              this.changeTable({ current: 1 });
            }
          });
        } else {
          return false;
        }
      });
    },
    addConfirmHandler() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (this.addForm.id) {
            this.updateServServiceConf(this.addForm).then((rep) => {
              if (rep) {
                this.editVisible = false;
                this.changeTable({ current: 1 });
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    cancelHandler() {
      this.slopeForm = {};
      this.addForm = {};
      this.$refs?.slopeForm?.resetFields();
      this.$refs?.addForm?.resetFields();
    }
  }
};
</script>

<style lang="less" scoped>
.bottom {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.bottom-left {
  width: 50%;
  margin-right: 20px;
  .bottom-left-box {
    display: flex;
    text-align: center;
    >div {
      width: 200px;
      border: 1px solid #797979;
      :first-child {
        border-bottom: 1px solid #797979;
      }
      >div {
        height: 30px;
        line-height: 30px;
      }
    }
    :not(:last-child(n)){
      border-right: 1px solid #797979;
    }
  }
}
.btns {
display: flex;
justify-content: flex-start;
margin-top: 15px;
}
.inputGroups {
  margin-top: 15px;
  :not(:last-child){
    margin-bottom: 10px;
  }
}
</style>
